@extends('template.layout1')

@section('resources')
    <script src="http://qzonestyle.gtimg.cn/open/qcloud/video/h5/h5connect.js"></script>
    <title>软件下载 | 专注4-12周岁儿童在线教学，严选美国外教，游戏化教学｜久趣英语</title>
@stop


@section('content')
    <div class="bg scroll-point">

        <div class="screen-slides">
            <div class="left-slide">
                <img src='../img/bg_left.png'>
            </div>
            <div class="right-slide">
                <img src='../img/bg_right.png'>
            </div>
        </div>

        <div class="cover">
            <div class="b">久趣客户端下载</div>
            <div class="s">下载APP，随时随地跟北美外教学英语</div>
            <div class="download-btns">
                <a  class="item" href="https://gstatic.97kid.com/shell/2.2.0/setup.student(D287994).exe">
                    <div >
                        <div class="win-icon s-i">
                        </div>
                        <span class="text">WINDOWS 版下载</span>
                    </div>
                </a>

                <a  class="item" href="https://gstatic.97kid.com/shell/2.2.0/setup.student(A376081).dmg">
                    <div >
                        <div class="mac-icon s-i">
                        </div>
                        <span class="text">MAC 版下载</span>
                    </div>
                </a>

                <a   class="item" target="_blank" href="https://itunes.apple.com/cn/app/id1253321260">
                    <div >
                        <div class="pad-icon s-i">
                        </div>
                        <span class="text">IPAD 版下载</span>
                    </div>
                </a>
            </div>

            <img class="" src="{{env('CDN_RESOURCE')}}/img/mobile.png">
        </div>

    </div>

    <div class="easy-step">
        <div class="header">
             简单3步, 立即上课
        </div>

        <div class="step-demo">
            <div class="d-l-block">
                <div class="blue-ok-icon s-i"></div>
                <div class="b">购买课程</div>
                <div class="m">
                    购买课程后，提交分级问卷，确定孩子入学等级
                </div>

                <img class="num-img" src="{{env('CDN_RESOURCE')}}/img/1.png"/>

            </div>
            <div class="d-l-block">
                <img class="img" src="{{env('CDN_RESOURCE')}}/img/illustrator1.png">
            </div>
        </div>

        <div class="step-demo">

            <div class="d-l-block">
                <img class="img" src="{{env('CDN_RESOURCE')}}/img/illustrator2.png">
            </div>

            <div class="d-l-block">
                <div class="blue-chat-icon s-i"></div>
                <div class="b">微信约课</div>
                <div class="m">
                    进入微信公众号，轻松选择合适时间并预约
                </div>

                <img class="num-img" src="{{env('CDN_RESOURCE')}}/img/2.png"/>

            </div>

        </div>

        <div class="step-demo">
            <div class="d-l-block">
                <div class="blue-tv-icon s-i"></div>
                <div class="b">登录教室</div>
                <div class="m">
                    电脑/平板安装[久趣英语客户端]，登录并开始上课吧
                </div>

                <div class="s">
                    (Windows Win7及以上/ Mac OS X 10.9以上)+摄像头+耳麦 或者 (iPad 4/iPad mini 2及以上/ iOS 9.0及以上)
                </div>

                <img class="num-img" src="{{env('CDN_RESOURCE')}}/img/3.png"/>

            </div>
            <div class="d-l-block">
                <img class="img" src="{{env('CDN_RESOURCE')}}/img/illustrator3.png">
            </div>
        </div>

    </div>

@stop


@section('script')
    <script type="text/javascript">
        $(document).ready(function (fn) {
            $('.level span').hover(function () {

                $(this).addClass('active-level');
                $(this).siblings('span').removeClass('active-level');
                var levelIndex = $(this).index();
                $('.level-info table').eq(levelIndex).addClass('active-level-info');
                $('.level-info table').eq(levelIndex).siblings('table').removeClass('active-level-info');
            });
        })
    </script>
@stop